import { Card, Form, Input, Select, Button, Table, Popconfirm, message } from "antd";
import TitleHandlerDiv from "../../../components/TableHandlerArea";
import React, { useState, useEffect } from "react";
import "./index.scss";
import { HeaderFormCom, PaginationCom } from "../../../components/ArticleDetailCom/DrawerMultilayer/OssFileDrawer";
import api from "../../../api";
import { useHistory } from "react-router-dom";
const { Option } = Select;
const { Column } = Table;

const EmailAdmin = () => {
  const history = useHistory();
  const [emailList, setEmailList] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);
  const [total, setTotal] = useState(0);
  const onSelectChange = (selectedRowKeys, selectedRows) => {
    setSelectedRows([...selectedRows]);
  };

  const rowSelection = {
    selectedRows,
    onChange: onSelectChange,
  };
  const [form, setForm] = useState({
    pageIndex: 1,
    pageSize: 8,
    addresser: "",
    addressee: "",
    themeVal: "",
  });
  useEffect(() => {
    init();
  }, []);
  const init = () => {
    getEmailList();
  };
  //获取文章列表
  const getEmailList = async () => {
    const res = await api.getEmail({ ...form });
    setEmailList([...res.data.res]);
    setTotal(res.data.total);
  };
  //form表单  change事件
  const changeFormValue = (value, type) => {
    form[type] = value;
    setForm({ ...form });
  };
  //重置表单
  const resetForm = () => {
    form.pageIndex = 1;
    form.pageSize = 8;
    form.addresser = "";
    form.addressee = "";
    form.themeVal = "";
    setForm({
      ...form,
    });
  };
  //删除(单个)
  const delEmail = async (id) => {
    await api.delEmail({ id });
    await init();
    message.success("删除成功");
  };
  //批量操作函数   apiPath<string>  api下的函数名
  const batchHandlerList = async (apiPath) => {
    await api[apiPath]({ batchList: selectedRows });
    await getEmailList();
    message.success("操作成功");
  };
  //分页
  const changePagination = async (pageIndex, pageSize) => {
    form.pageIndex = pageIndex;
    form.pageSize = pageSize;
    await setForm({ ...form });
    getEmailList();
  };
  return (
    <div className="all-article">
      <Card>
        <HeaderFormCom handlerResetBtn={resetForm} handlerSearchBtn={getEmailList}>
          <Form layout="inline">
            <Form.Item label="发件人">
              <Input placeholder="请输入发件人" value={form.addresser} onChange={(e) => changeFormValue(e.target.value, "addresser")} />
            </Form.Item>
            <Form.Item label="收件人">
              <Input placeholder="请输入收件人" value={form.addressee} onChange={(e) => changeFormValue(e.target.value, "addressee")} />
            </Form.Item>
            <Form.Item label="主题">
              <Input placeholder="请输入主题" value={form.themeVal} onChange={(e) => changeFormValue(e.target.value, "themeVal")} />
            </Form.Item>
          </Form>
        </HeaderFormCom>
      </Card>
      <Card
        title={
          <TitleHandlerDiv showHandlerArea={selectedRows.length} isShowBtn={false}>
            <div className="article_handler_btn">
              <Popconfirm title="确定删除吗?" okText="确认" cancelText="取消" onConfirm={() => batchHandlerList("batchDelEmail")}>
                <Button danger>删除</Button>
              </Popconfirm>
            </div>
          </TitleHandlerDiv>
        }
        className="table-card"
      >
        <Table
          rowSelection={{ type: "checkbox", ...rowSelection }}
          dataSource={emailList}
          rowKey="id"
          pagination={false}
          scroll={{ x: 1500 }}
          style={{ width: "100%", overflow: "none" }}
        >
          <Column title="收件人" dataIndex="addresser" width={200} />
          <Column title="发件人" dataIndex="addressee" width={200} />
          <Column title="主题" dataIndex="theme" width={150} />
          <Column title="发送时间" dataIndex="send_time" width={200} />
          <Column
            title="操作"
            dataIndex="action"
            align="center"
            width={200}
            render={(_, record) => {
              return (
                <div>
                  <Popconfirm title="确定删除吗?" okText="确认" cancelText="取消" onConfirm={() => delEmail(record.id)}>
                    <Button type="link">删除</Button>
                  </Popconfirm>
                </div>
              );
            }}
          />
        </Table>
        <div className="pagination-box">
          <PaginationCom total={total} onChange={changePagination} pageSize={form.pageSize} pageIndex={form.pageIndex} />
        </div>
      </Card>
    </div>
  );
};

export default EmailAdmin;
